<template>
  <div class="q-table">
    <!-- 顶部工具行 -->
    <a-row class="q-table-title-row" type="flex" align="middle">
      <!-- 按钮部分 -->
      <a-col :span="19">
        <!-- 新增按钮 -->
        <a-button
          type="primary"
          v-show="batchOperateShow"
          @click="add"
          class="add-button"
          style="float: left">
          <plus-outlined />
          {{$t('component.qTable.add')}}
        </a-button>
        <!-- 批量操作按钮 -->
        <a-button
            type="text"
            @click="batchOperateShow = !batchOperateShow"
            class="batch-operate-but return-but">
          <MenuUnfoldOutlined v-show="batchOperateShow"/>
          <arrow-left-outlined v-show="!batchOperateShow"/>
          {{ batchOperateShow ? $t('component.qTable.batchOperate') : $t('component.qTable.return') }}
        </a-button>
        <div class="batch-operate-divider" v-show="!batchOperateShow"/>
        <!-- 导入按钮 -->
        <a-button
          type="text"
          v-show="!batchOperateShow"
          v-if="showImportButton"
          class="batch-operate-but batch-delete-but"
          @click="doImport">
          <download-outlined />
          {{ $t('component.qTable.import') }}
        </a-button>
        <!-- 导出按钮 -->
        <a-button
          type="text"
          v-show="!batchOperateShow"
          v-if="showExportButton"
          class="batch-operate-but batch-delete-but"
          @click="doExport">
          <upload-outlined />
          {{ $t('component.qTable.export') }}
        </a-button>
        <!-- 批量删除按钮 -->
        <a-popconfirm
          :disabled="selectedRowKeys.length < 1"
          class="batch-delete-popconfirm"
          :title="$t('component.qTable.sureDelete')"
          :ok-text="$t('component.qTable.yes')"
          :cancel-text="$t('component.qTable.no')"
          @confirm="remove(undefined, 1)">
          <template #icon><info-circle-outlined style="color: red"/></template>
          <a-button
            type="text"
            v-if="!batchOperateShow"
            class="batch-operate-but batch-delete-but"
            :disabled="selectedRowKeys.length < 1">
            <rest-outlined />
            {{ $t('component.qTable.batchDelete') }}
          </a-button>
        </a-popconfirm>
      </a-col>
      <!-- 搜索框部分 -->
      <a-col :span="5">
        <a-input
          class="q-table-search-input"
          style="float: right"
          v-model:value="searchInfo"
          @keyup.enter.native="doSearch"
          :placeholder="$t('component.qTable.searchPlaceholder')">
          <template #prefix>
            <search-outlined @click="doSearch"/>
          </template>
        </a-input>
      </a-col>
    </a-row>
    <!-- 表格部分 -->
    <a-table
      :row-selection="{ onChange: onSelectChange, fixed: true }"
      :data-source="dataSource"
      :pagination="false"
      :rowKey="(record)=>{return record[rowKey]}"
      :bordered="bordered"
      :loading="loading"
      :scroll="{ x: 'max-content', y: `calc(100vh - ${tableY}px)`, scrollToFirstRowOnChange: true }">
      <a-table-column
        key="index"
        :title="$t('component.qTable.serialNumber')"
        align="center"
        width="100px"
        v-if="showIndex"
        fixed="left">
        <template #default="{ index }">
          <span>
            {{(pNo - 1) * pSize + (index + 1)}}
          </span>
        </template>
      </a-table-column>

      <slot></slot>

      <a-table-column
        key="operate"
        :title="$t('component.qTable.operate')"
        align="center"
        v-if="showOperate"
        fixed="right"
        :width="operateColumnWidth">
        <template #default="{ record, index }">
          <span>
            <slot name="operateAdd" :record="record" :index="index"></slot>
            <slot name="operate" :record="record" :index="index">
              <span>
                <a-button type="text" @click="see(record)" v-if="showSeeButton" class="see-but">{{$t('component.qTable.see')}}</a-button>
                <a-button type="text" @click="edit(record)" v-if="showEditButton" class="edit-but">{{$t('component.qTable.edit')}}</a-button>
                <a-popconfirm
                  :title="$t('component.qTable.sureDelete')"
                  :ok-text="$t('component.qTable.yes')"
                  :cancel-text="$t('component.qTable.no')"
                  @confirm="remove(record, 2)">
                  <template #icon><info-circle-outlined style="color: red"/></template>
                  <a-button type="text" danger v-if="showRemoveButton" class="remove-but">{{$t('component.qTable.delete')}}</a-button>
                </a-popconfirm>
              </span>
            </slot>

          </span>
        </template>
      </a-table-column>
    </a-table>
    <!-- 分页部分 -->
    <a-row
      class="q-table-pagination"
      type="flex"
      align="middle"
      justify="center"
      v-show="total !== 0"
      v-if="pagination">
      <a-col>
        <a-pagination
          :show-total="total => `${this.$t('component.qTable.pageTitlePrefix')} ${total} ${this.$t('component.qTable.pageTitleSuffix')}`"
          v-model:current="pNo"
          v-model:page-size="pSize"
          :page-size-options="pSizeOptions"
          show-size-changer
          @change="changePage"
          :total="total"
          :show-quick-jumper="showQuickJumper"/>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { MenuUnfoldOutlined,
    ArrowLeftOutlined,
    RestOutlined,
    SearchOutlined,
    InfoCircleOutlined,
    DownloadOutlined,
    UploadOutlined,
    PlusOutlined } from '@ant-design/icons-vue'

  export default {
    name: 'QTable',
    components:{
      MenuUnfoldOutlined,
      ArrowLeftOutlined,
      RestOutlined,
      SearchOutlined,
      InfoCircleOutlined,
      UploadOutlined,
      PlusOutlined,
      DownloadOutlined
    },
    props: {
      // 表格滚动调整高度，数值越大，表格高度越小
      tableHeight: {
        type: Number,
        required: false,
        default: 280
      },
      // 数据集合
      dataSource: {
        type: Array,
        required: false,
        default: () => {
          return []
        }
      },
      // 数据加载中效果
      loading: {
        type:　Boolean,
        required: false,
        default: false
      },
      // 是否开启分页功能
      pagination: {
        type:　Boolean,
        required: false,
        default: false
      },
      // 分页的下拉选项
      pageSizeOptions: {
        type: Array,
        required: false,
        default: () => {
          return ['5', '10', '20', '50']
        }
      },
      // 是否显示序号列
      showIndex: {
        type:　Boolean,
        required: false,
        default: false
      },
      // 一行数据绑定的唯一标识
      rowKey: {
        type: String,
        required: true,
        default: 'iid'
      },
      // 总数据量
      total: {
        type: Number,
        required: false,
        default: 0
      },
      // 当前页
      pageNo: {
        type: Number,
        required: false,
        default: 1
      },
      // 分页大小
      pageSize: {
        type: Number,
        required: false,
        default: 10
      },
      // 是否显示跳至多少页的控件
      showQuickJumper: {
        type:　Boolean,
        required: false,
        default: false
      },
      // 是否展示导入按钮
      showImportButton: {
        type:　Boolean,
        required: false,
        default: false
      },
      // 是否展示导出按钮
      showExportButton: {
        type:　Boolean,
        required: false,
        default: false
      },
      // 是否展示操作列
      showOperate: {
        type:　Boolean,
        required: false,
        default: true
      },
      // 是否显示查看按钮
      showSeeButton: {
        type:　Boolean,
        required: false,
        default: true
      },
      // 是否显示编辑按钮
      showEditButton: {
        type:　Boolean,
        required: false,
        default: true
      },
      // 是否显示删除按钮
      showRemoveButton: {
        type:　Boolean,
        required: false,
        default: true
      },
      // 操作列宽度
      operateColumnWidth: {
        type: [Number, String],
        required: false,
        default: '250px'
      },
      // 是否有边框
      bordered: {
        type: Boolean,
        required: false,
        default: true
      }
    },
    data () {
      return {
        tableY: this.tableHeight, // 表格可滚动高度修正值
        pNo: this.pageNo,
        pSize: this.pageSize,
        pSizeOptions: this.pageSizeOptions,
        batchOperateShow: true, // 是否展示批量操作按钮
        searchInfo: '', // 搜索框内容
        selectedRowKeys: [], // 复选框选中的key值集合
        selectedRows: [], // 复选框中的选中的数据集合
        rowSelection: {
          hideDefaultSelections: true
        },

      }
    },
    computed: {
    },
    methods: {
      // 导入
      doImport () {
        this.$emit('doImport')
      },
      // 导出
      doExport () {
        this.$emit('doExport')
      },
      // 查看
      see (record) {
        this.$emit('see', record)
      },
      // 编辑
      edit (record) {
        this.$emit('edit', record)
      },
      // 删除
      remove (record, type) {
        if (type === 1) {
          this.$emit('batchRemove', this.selectedRowKeys, this.selectedRows)
        } else {
          this.$emit('remove', [record[this.rowKey]], [record])
        }
      },
      // 新增
      add () {
        this.$emit('add')
      },
      // 做搜索操作
      doSearch () {
        this.pNo = 1
        this.$emit('update:pageNo', this.pNo)
        this.$emit('search', this.searchInfo)
      },
      // 分页信息修改
      changePage (page, pageSize) {
        this.$emit('update:pageNo', this.pNo)
        this.$emit('update:pageSize', this.pSize)
        this.$emit('changePage')
      },
      /**
       * 复选框选中改变
       * @param selectedRowKeys 选中的行
       */
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      }
    },
    watch: {
      pageNo: {
        handler: function (newVal, oldVal) {
          this.pNo = newVal
        }
      },
      pageSize: {
        handler: function (newVal, oldVal) {
          this.pSize = newVal
        }
      }
    }
  }
</script>

<style lang="less" scoped src="./style/index.less">
</style>
